<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>table模块快速使用</title>
    <link rel="stylesheet" href="static/layui/css/layui.css" media="all">
</head>
<body>

<table id="demo" lay-filter="test1" class="lay-data=" {id:'idTest'}"></table>

<script src="static/layui/layui.js"></script>
<script>
    layui.use(['table','layer'], function(){
        var table = layui.table;
        const $ = layui.$;


        //第一个实例
        const tableIns = table.render({
            id: 'idTest',
            elem: '#demo',
            height: 312,
            url: '/user/all/',//数据接口,
            page: [true,13], //开启分页,
            limit: 13
            ,response: {
                statusCode: 200 //规定成功的状态码，默认：0
            },
            cols: [[ //表头
                {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'},
                {field: 'name', title: '用户名', width:150},
                {field: 'password', title: '密码', width:150},
                {field: 'address', title: '城市', width:150},
                {field: 'phone', title: '电话', width: 177},
                {fixed: 'right', width:250, align:'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
            ]]
        });


        //监听工具条
        table.on('tool(test1)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if(layEvent === 'detail'){ //查看
                layer.open({
                    type: 2,
                    content: 'detail.jsp',
                    area: ['700px', '300px'],
                    success: function(layero, index){
                        console.log(layero, index);
                        const body =  layer.getChildFrame('body', index);
                        body.find('#id').val(data.id);
                        body.find('#name').val(data.name);
                        body.find('#password').val(data.password);
                        body.find('#address').val(data.address);
                    }
                });

            } else if(layEvent === 'del'){ //删除
                layer.confirm('真的删除行么', function(index){
                    //obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    //向服务端发送删除指令
                    //发起Ajax请求
                    $.ajax({
                        url: '/user/del',
                        type: 'POST',
                        data: {id: data.id},
                        success: function (res) {
                            if (res.code === 200) {
                                tableIns.reload();
                                layer.msg('删除成功');
                            }else {
                                layer.msg('删除失败');
                            }
                        },
                        error: function (error) {
                            layer.msg(error);
                        }
                    });
                    layer.close(index);
                });
            } else if(layEvent === 'edit'){ //编辑
                // layer.alert('编辑行：<br>'+ JSON.stringify(data))
                //
                // //同步更新缓存对应的值
                // obj.update({
                //     username: '123'
                //     ,title: 'xxx'
                // });


                layer.open({
                    type: 2,
                    content: 'edit.jsp',
                    area: ['700px', '300px'],
                    success: function(layero, index){
                        console.log(layero, index);
                        const body =  layer.getChildFrame('body', index);
                        body.find('#id').val(data.id);
                        body.find('#name').val(data.name);
                        body.find('#password').val(data.password);
                        body.find('#address').val(data.address);
                    },
                    cancel: function(index, layero){
                        tableIns.reload();
                        return true;
                    }
                });


            } else if(layEvent === 'LAYTABLE_TIPS'){
                layer.alert('Hi，头部工具栏扩展的右侧图标。');
            }
        });

    });


</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

    <!-- 这里同样支持 laytpl 语法，如： -->
    {{#  if(d.auth > 2){ }}
    <a class="layui-btn layui-btn-xs" lay-event="check">审核</a>
    {{#  } }}
</script>
</body>
</html>